import DrawerFooter from '@/components/DrawerFooter';
import { Button, Form, Input } from '@alifd/next';
import { t } from '@lingui/macro';
import React, { useState } from 'react';

const FormItem = Form.Item;

function ChargeForm({ data: origin, onSubmit, onCancel }) {
  const [data, setData] = useState(origin);

  /**
   * 保存数据
   * @param {*} value
   */
  const handleSetData = (value) => {
    setData({
      ...data,
      ...value,
    });
  };

  return (
    <Form
      labelAlign="top"
      fullWidth
      value={data}
      onChange={handleSetData}
      onSubmit={onSubmit}
      useLabelForErrorMessage
    >
      <FormItem
        label={t`司机名称`}
        name="name"
      >
        <Input placeholder={t`请输入内容`} />
      </FormItem>
      <FormItem
        label={t`大陆手机号`}
        name="mainPhone"
        format="tel"
      >
        <Input placeholder={t`请输入内容`} />
      </FormItem>
      <FormItem
        label={t`香港手机号`}
        name="hkPhone"
        format="tel"
      >
        <Input placeholder={t`请输入内容`} />
      </FormItem>
      <FormItem
        label={t`司机微信号`}
        name="wxAccount"
      >
        <Input placeholder={t`请输入内容`} />
      </FormItem>
      <DrawerFooter>
        <FormItem>
          <Form.Submit validate type="primary" onClick={onSubmit}>{t`保存`}</Form.Submit>
          <Button style={{ marginLeft: 8 }} onClick={onCancel}>{t`取消`}</Button>
        </FormItem>
      </DrawerFooter>
    </Form>
  );
}

export default ChargeForm;
